<template>
  <div class="maxbox" v-show="maxFlag">
    <div class="box">
      <transition name="lsitAnimation">
        <div class="list " v-show="!flag">
          <ul>
            <li @click="flag = true">切换主题</li>
            <li>下载数据</li>
            <li>导入数据</li>
            <li>编辑数据</li>
            <li>清空数据</li>
          </ul>
        </div>
      </transition>
      <transition name="lsitAnimation">
        <div v-show="flag" class="list">
          <li @click="tapBtn(v.id)" v-for="(v, i) in arr" :key="i">
            <span :style="`background:${v.id};`" class="corlor"></span>
            <span> {{ v.name }}</span>
          </li>
          <button @click="flag = false">取消</button>
          <button @click="maxFlag = !maxFlag">确定</button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup(props) {
    let flag = ref(false);
    let maxFlag = ref(true);
    let arr = reactive([
      {
        name: "红色",
        id: "red",
      },
      {
        name: "蓝色",
        id: "blue",
      },
      {
        name: "粉色",
        id: "pink",
      },
      {
        name: "灰色",
        id: "#ccc",
      },
    ]);
    function tapBtn(id) {
      bag.style.backgroundColor = id;
      bag1.style.backgroundColor = id;
      bag2.style.backgroundColor = id;
      bag3.style.backgroundColor = id;
      bag4.style.backgroundColor = id;
    }
    return {
      arr,
      maxFlag,
      flag,
      tapBtn,
    };
  },
};
</script>

<style lang="scss" scoped>
.lsitAnimation-enter-from,
.lsitAnimation-leave-to {
  opacity: 0;
}
.lsitAnimation-enter-active,
.lsitAnimation-leave-active {
  transition: all 0.5s linear;
}
.list {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  ul {
    li {
      width: 120px;
      height: 40px;
      background-color: #f49995;
      border-radius: 8px;
      color: #fff;
      margin: 20px auto;
    }
  }
}
button {
  width: 60px;
  height: 30px;
  background-color: pink;
  text-align: center;
  border: 0px solid #000;
  border-radius: 4px;
  margin: 10px;
  color: #fff;
  outline: none;
}
.maxbox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
  left: 0;
}
.corlor {
  height: 100%;
  width: 20px;
  display: inline-block;
}
li {
  width: 120px;
  height: 20px;
  margin: 5px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.box {
  width: 70%;
  height: 89.5%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  div {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
